/**
 * @license
 * Copyright 2018 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

{namespace googlecodelabs.Codelab.Templates}

/**
 * Renders the main structure
 */
{template .structure}
  {@param homeUrl: string}
  <div id="drawer">Drawer</div>
  <div id="codelab-title">
    <div id="codelab-nav-buttons">
      <a href="{$homeUrl}" id="arrow-back"><i class="material-icons">close</i></a>
      <a href="#" id="menu"><i class="material-icons">menu</i></a>
    </div>
    <div class="codelab-time-container"></div>
    <devsite-user></devsite-user>
  </div>
  <div id="main">
    <div id="steps"></div>
    <div id="controls">
      <div id="fabs">
        <a href="#" id="previous-step" title="Previous step">Back</a>
        <div class="spacer"></div>
        <a href="#" id="next-step" title="Next step">Next</a>
        <a href="{$homeUrl}" id="done" hidden title="Codelab complete">Done</a>
      </div>
    </div>
  </div>
{/template}


/**
 * Renders the title
 */
{template .title}
  {@param title: string}
  <h1 is-upgraded class="title">{$title}</h1>
{/template}


/**
 * Renders the time remaining
 */
{template .timeRemaining}
  {@param time: number}
  <div class="time-remaining" title="Time remaining">
   <i class="material-icons">access_time</i>
   {if $time == 1}
    {$time} min remaining
   {else}
    {$time} mins remaining
   {/if}
  </div>
{/template}


/**
 * Renders the drawer
 */
{template .drawer}
  {@param steps: list<string>}
  {@param? feedback: string}
  <div class="codelab-time-container"></div>
  <div class="steps">
    <ol>
      {for $step in $steps}
        <li><a href="#{index($step)}"><span class="step"><span>{$step}</span></span></a></li>
      {/for}
    </ol>
  </div>
  <div class="metadata">
    <a {if $feedback}target="_blank" href="{$feedback}"{else}href="#" id="codelab-feedback"{/if}>
      <i class="material-icons">bug_report</i> Report a mistake
    </a>
  </div>
{/template}
